<template>
  <div class="home">
    <h1 class="title">{{ title }}</h1>
    <div class="container" v-for="(item,index) in CardList" :key="index">
      <card :data-image="item.imageUrl">
        <h1 slot="header">{{ item.headerName}}</h1>
        <p slot="content">{{ item.centerTxt}}</p>
      </card>
    </div>
  </div>
</template>

<script>
import card from "@/components/home-card/Card";
export default {
  components: { card },
  data: () => ({
    title : 'DEBUGGER THE WORLD',
    CardList: [
      {
        imageUrl:
          "static/deskImg/d1.jpg",
        headerName: "java",
        centerTxt: "java数据结构/ jvm/ java8新特性"
      },
      {
        imageUrl:
          "static/deskImg/d2.jpg",
        headerName: "Vue/JS",
        centerTxt: " Vue源码解读/ ES6语法/ JavaScript原型链/闭包"
      },
      {
        imageUrl:
          "static/deskImg/d3.jpg",
        headerName: "框架学习",
        centerTxt: "JavaScript Api/ ES6语法/ JavaScript原型链闭包"
      },
      {
        imageUrl:
          "static/deskImg/d4.jpg",
        headerName: "运维",
        centerTxt: "Linux/ docker/ k8s"
      }
    ]
  })
};
</script>

<style lang="scss" scoped>
$hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
$returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);

.home {
  background-image  :  url('https://pic4.zhimg.com/v2-d75cbcaa6940b72cb8642fbf0590d218_r.jpg');
  // background-image: image('static/deskImg/d1.jpg');
  // opacity: 0.5;
  width: 100%;
  height: 100%;
}

body {
  margin: 40px 0;
  font-family: "Raleway";
  font-size: 14px;
  font-weight: 500;
  background-color: #BCAAA4;
  -webkit-font-smoothing: antialiased;
}

.title {
  font-family: "Raleway";
  font-size: 60px;
  font-weight: 1000;
  color: #5D4037;
  text-align: center;
}

p {
  line-height: 1.5em;
}

h1+p, p+p {
  margin-top: 10px;
}

.container {
  padding: 40px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

</style>